<template>
	<view class="getPaper">
			<u-toast ref="uToast"></u-toast>
		<!-- 按需获取纸条列表 -->
		<!-- 男女生分区列表 -->
		<u-subsection :list="subsectionList"  :current="sex" @change="sectionChange"></u-subsection>
		
		<!-- 纸条列表展示区域 -->
		<scroll-view  class="scrollView"  scroll-y="true" enable-back-to-top="true" >
			<view class="empty" v-show="paperList.length==0">
				<u-empty						
				        mode="search"
						text="还没有任何纸条哦!"
				>
				</u-empty>
			</view>				
					<u-list
						@scrolltolower="scrolltolower"
						v-show="paperList.length!=0"
					>
						<u-list-item
							v-for="(item, index) in paperList"
							:key="index"
						>
							<u-cell
								:title="`列表长度-${index + 1}`"
							>
								<u-avatar
									slot="icon"
									shape="square"
									size="35"
									:src="item.url"
									customStyle="margin: -3px 5px -3px 0"
								></u-avatar>
							</u-cell>
						</u-list-item>
					</u-list>
			
		</scroll-view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				subsectionList:['♂ 男生纸条','♀ 女生纸条'],
				sex: 0,
				isRefresher:true,
				paperList:[],
				paperCount:0,//纸条总数
				page:1, //初始默认值为第一页
				pageCount:15 //平均一页15条
			}
		},
		 onLoad() {	
		   this.initPage()
		},
		//监听下拉刷新事件
		onPullDownRefresh (){		
			this.sectionChange(this.sex)
		},
		methods:{
			async initPage(){
				var malePaper= await this.getPaperList({sex:'男'}) //获取男生纸条列表
					this.paperList=malePaper.data.data.list //以男生纸条为默认显示为页面的数据
					this.paperCount=malePaper.data.data.count //设置纸条总数
					console.log(this.paperList)
			},
			getPaperList({sex}){
						
				var {page,pageCount} =this
				return this.$myRquest({
					url:'/pond/getList',
					method:'get',
					data:{
						sex,
						page,
						limit:pageCount
					}
				})
			},
			async sectionChange(index){
				this.sex=index
				this.page=1 //每次切换将页码重设为1
				var result=null
				switch(this.sex){ //0表示男 1表示女
					case 0: 
						result= await this.getPaperList({sex:'男'})
					break;
					case 1:
						result= await this.getPaperList({sex:"女"})
					break;
					default:
					break;
				}					
				this.paperCount=result.data.data.count //每次切换重新获取页面总条数
				this.paperList=	result.data.data.list	//为了男女纸条后续添加的数据互不影响，每次切换重置页面纸条列表 	
				uni.stopPullDownRefresh()//关闭下拉刷新
			},		
			//滚动到底部触发上拉加载更多
			async scrolltolower(){
				if(this.paperCount==this.paperList.length ){					
					this.$refs.uToast.show({
									message:'已经到底了哦！',
									type:'error',
									duration:1000
									})
					return 
				}				
				this.page+=1
				var result=null
				switch(this.sex){ //0表示男 1表示女
					case 0: 
						result= await this.getPaperList({sex:'男'})
					break;
					case 1:
						result= await this.getPaperList({sex:"女"})
					break;
					default:
					break;
				}
				this.paperCount=result.data.data.count //每次上拉重新获取页面总条数为了防止浏览的同时 有其他用户添加纸条
				this.paperList.push(result.data.data.list)				
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.scrollView{
		width: 100%;

		height: calc(100vh - 150rpx);
		border: 1px solid red;
	}
	.empty{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.paperList{
		width: 100%;
		height: 100%;
		border: 1px solid black;
	}
</style>
